<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <script>
        $(function () {
            new Vue({
                el: '#app',
                data: {
                    proList: [],
                    eventSwitch: true
                },
                methods: {
                    addCart: function (p) {
                        var param = new URLSearchParams();
                        param.append('phone', localStorage.getItem('localPhone'));
                        param.append('productId', p);
                        axios.post(
                            'product/addCart', param
                        ).then(r => {
                                if (r.data.success) {
                                    alert("加入购物车成功！");
                                } else {
                                    alert("加入购物车失败！");
                                }
                            }
                        );
                    },
                    createOrder: function () {
                        var param = new URLSearchParams();
                        param.append('phone', localStorage.getItem('localPhone'));
                        axios.post(
                            '/product/createOrder', param
                        ).then(rs => {
                                if (rs.data.success) {
                                    alert("订单生成成功:" + rs.data.storage);
                                    axios.post('/product/findProducts').then(res => {
                                        this.proList = res.data;
                                    });
                                } else {
                                    alert("订单生成失败," + rs.data.storage)
                                }
                            }
                        );
                    }
                },

                mounted: function () {//模板渲染成html后自动调用,用于获取后台数据，然后把数据填充到模板
                    /*idea用箭头函数报错：file-->settings-->language&frameworks-->javascript右侧设置成es6,file-->other settings-->default settings-->javascript 设置成es6*/
                    axios.post(
                        '/user/isLogin', /*后端必须@RequestBody才能接收到参数,参数就是json字符串*/
                        {phone: localStorage.getItem('localPhone')}
                    ).then(result => {
                        if (result.data.username) {
                            $('#login').html('欢迎您：' + result.data.username);
                        } else {
                            $('#login').html('你还没有<a href="userLogin.html">登录</a>');
                            //关闭生成订单和购物车添加功能
                            this.eventSwitch = false;
                        }
                    });
                    axios.post('/product/findProducts').then(rs => {
                        this.proList = rs.data;
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div id="login"></div>
    <div id="app" style="text-align: center; ">
        <table border="1" style="margin:auto; width:450px;">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
            <tr v-for='item in proList'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td>
                    <a href="" @click.prevent='eventSwitch&&addCart(item.id)'>加入购物车</a>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <a href="" @click.prevent='eventSwitch&&createOrder()'> 生成订单</a>
                </td>
            </tr>
        </table>
        <br>
    </div>
</body>
</html>